<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/style.css" />
		<style>
			.display-none { visibility:hidden; }
		</style>
	</head>
	<body>
		<div class="header header_01" id="header">
			<div class="wrapper">
				<div class="h_s_form">
					<div class="m_cell_hd m_cell_primary"><input type="text" id="keyword" name="keyword" value="" placeholder="请输入目的地" /></div>
					<div class="m_cell_ft"><button tapmode onclick="closeSearchMode();">取消</button></div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript">
		var UIInput;
		var keyOpened = 1; //键盘是否弹出
		var keyboardId = 0;//当前键盘ID
		apiready = function() {
			api.parseTapmode();
			var header = $api.byId('header');
			$api.fixStatusBar(header);
			var headerPos = $api.offset(header);
			
			UIInput = api.require('UIInput');
			fnInitUIInput(); //初始UIinput打开
			api.openFrame({
				name: 'search_frm',
				url: 'search_frm.html',
				bounces: false,
				rect: {
					x: 0,
					y: headerPos.h,
					w: 'auto',
					h: 'auto'
				}
			});
			
		}
		function openUIinput(domid,placeholder_str,keyboardType,inputType,val){
			//打开UIinput
			var password = $api.byId(domid);
			var rect = $api.offset(password);
			UIInput.open({
				rect: {
					x: rect.l+35,
					y: rect.t+1,
					w: rect.w-60,
					h: rect.h-1
				},
				styles: {
					bgColor: '#F2F3F5',
					size: 14,
					color: '#333',
					placeholder: {
						color: '#999'
					}
				},
				autoFocus: true,
				maxRows: 1,
				placeholder: placeholder_str,
				keyboardType: keyboardType,
				inputType: inputType,
				fixedOn: api.frameName,
				fixed: false
			}, function(ret) {
				keyboardId = ret.id;
				UIInput.addEventListener({
					id: keyboardId,
					name : 'becomeFirstResponder'
				}, function() {
					keyOpened = 1;
				});
				if (ret.eventType == 'change') {
					keyboardId = ret.id;
					UIInput.value({
							id: ret.id,
							//msg : '设置输入框的值'
					}, function(ret, err) {
						if (ret) {
							$api.val(password,ret.msg);
							
						} else {
							//alert(JSON.stringify(err));
						}
					});
					
					
			} else if (ret.eventType == 'search') {//点击键盘上的搜索按钮
					search();//搜索
				}
			});
			
		}
		function search() {
			hideInput();
			var keyword = $api.val($api.byId('keyword'));
			api.execScript({
				frameName: 'search_frm',
				script: 'getFilterJsonFromAPI(\'' + keyword + '\');'
				//script: 'getFilterJsonFromAPI('+cateId+',"'+jsontag+'",'+sortId+');'
			});
		}
		function fnInitUIInput(){
			//计算位置
			openUIinput('keyword','搜索手机号','search','text','');
		}
		function closeSearchMode() {
			//退出搜索模式
			if(keyOpened == 1)
			{
				hideInput();
			}
			else
			{
				closeWin();
			}
			//var header = $api.byId('header');
			//$api.fixStatusBar(header);
		}
		function hideInput(){
			//隐藏键盘
			keyOpened = 0;
			UIInput.closeKeyboard({
				id: keyboardId
			});
		}
		
		function closeWin(){
			api.closeWin({
			});
		}
	</script>
</html>
